<template>
	<view>
		<!-- <button type="primary" @click="choose">选择照片</button> -->
		<!-- <button type="primary" @click="viewImg">预览图片</button> -->
		<view class="album">
			<view v-for="(url,index) in pictures" class="box">
				<image :src="url" mode="scaleToFill" @click="viewImg(index)"></image>
				<view class="mask iconfont icon-delete" @click="del(index)"></view>
			</view>
			<view class="box" v-if="pictures.length!=9" @click="choose">
				<view class="iconfont icon-plus-square plus">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		toRefs,
		reactive,
		onUpdated
	} from 'vue';
	export default {
		setup() {
			const pictures = ref([]);
			const max = (9);
			var isChoose = 1;

			onUpdated(() => {
				isChoose = max - pictures.value.length;
				console.log(isChoose)
			})

			const del = (i) => {
				pictures.value.splice(i, 1);
			}

			const choose = () => {
				if (isChoose) {
					uni.chooseImage({
						count: max - pictures.value.length,
						sizeType: ["compressed"],
						sourceType: ["album"],
						success: (res) => {
							console.log(res);
							res.tempFilePaths.forEach(i => {
								pictures.value.push(i);
							})
						}
					})
				} else {
					uni.showToast({
						title: "图片超出限制"
					})
				}
			}

			//图片预览
			const viewImg = (i) => {
				uni.previewImage({
					urls: pictures.value,
					current: i,
					indicator: "default",
					loop: true,
					longPressActions: {
						itemList: ["拷贝", "删除"],
						success(res) {
							console.log(this);
							console.log(res)
							if (res.tapIndex == 0) {
								console.log("您操作的是拷贝")
							} else {
								// console.log("您操作的是删除");
								del(res.index)
								uni.closePreviewImage()
							}
						}
					}
				})
			}

			return {
				choose,
				pictures,
				isChoose,
				del,
				viewImg
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url("https://at.alicdn.com/t/c/font_3630446_4j9jvpcmsd7.css");

	.box {
		width: 200rpx;
		height: 200rpx;
		display: inline-block;
		margin: 50rpx 25rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		.mask {
			width: 20rpx;
			height: 20rpx;
			// background-color: #ccc;
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			text-align: center;
			line-height: 20rpx;
			font-weight: bold;
			color: #fff;
		}

		.plus {
			font-size: 100px;
			color: #ccc;
		}
	}
</style>
